<div class="page-wrapper d-flex flex-column pt-4 w-100" ng-init="getSingle()">
    <div ng-if="viewmodel">
        <div class="container card page-header page-header-feature d-print-none mb-3" style="background-image: url('{{viewmodel.imageUrl}}'); ">
            <div class="page-title-wrapper row align-items-center pt-3">
                <div ng-if="viewmodel.title" class="col-6">
                    <div class="page-pretitle text-white">
                        Updating...
                    </div>
                    <h2 class="page-title text-white">
                        {{viewmodel.title}}
                    </h2>
                    <p class="lead">{{viewmodel.excerpt}}</p>
                </div>
                <div ng-if="!viewmodel.title" class="col-6">
                    <div class="page-pretitle text-white">
                        Create
                    </div>
                    <h2 ng-if="!viewmodel.title" class="page-title text-white">
                        New Module
                    </h2>
                    <p class="lead">{{viewmodel.excerpt}}</p>
                </div>
            </div>
            <span class="mask bg-gradient-primary" style="opacity: 0.5;"></span>
            <div class="page-thumbnail" style="background-image: url({{viewmodel.thumbnailUrl}});    ">
            </div>
        </div>
        <div class="page-body d-flex flex-row-reverse">

            <aside class="bd-sidebar sub-sidebar">
                <nav class="bd-links p-3" aria-label="Sub-section navigation">
                    <div class="card">
                        <actions on-clear-cache="clearCache()" preview-url="viewmodel.detailsUrl" content-url="contentUrl" back-url="'/portal/module/list'">
                        </actions>

                        <div class="mb-3"></div>
                        <div class="accordion accordion-flush shadow-none" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                        Basic informations
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <statuses status="viewmodel.status"></statuses>
                                        <div class="mb-3" ng-if="viewmodel.status == 4">
                                            <label class="form-label">Published Date Time</label>
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Calendar"></i></span>
                                                <input value="{{viewmodel.publishedDateTime}}" ng-model="viewmodel.publishedDateTime" type="datetime-local" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Created Date Time</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Calendar"></i></span>
                                                <input ng-model="viewmodel.createdDateTime" type="text" class="form-control" readonly="readonly" />
                                            </div>
                                        </div>

                                        <div class="mb-3 mb-0">
                                            <label class="form-label">Author</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Contact"></i></span>
                                                <input ng-model="viewmodel.createdBy" class="form-control" readonly="readonly" />
                                            </div>
                                        </div>
                                        <div ng-if="isAdmin" class="mb-3 mb-0">
                                            <label class="form-label">Template</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Layout"></i></span>
                                                <select class="form-select" ng-options="item as item.fileName for item in viewmodel.templates track by item.id" ng-model="viewmodel.view"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                        Languages
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <cultures is-clone="viewmodel.isClone" data="viewmodel.cultures"></cultures>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                        Images
                                    </button>
                                </h2>
                                <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <tabs-v ng-if="viewmodel" select-callback="selectPane(pane)" class="mb-4 nav-fill">
                                            <pane-v header="Feature">
                                                <custom-image header="'Feature upload'" type="'Modules'" folder="viewmodel.seoName" src-url="viewmodel.image" title="viewmodel.title" description="viewmodel.description" src="viewmodel.image" auto="'true'">
                                                </custom-image>
                                            </pane-v>
                                            <pane-v header="Thumbnail">
                                                <custom-image header="'Thumnail upload'" type="'Modules'" folder="viewmodel.seoName" title="viewmodel.title" description="viewmodel.description" src-url="viewmodel.thumbnail" src="viewmodel.thumbnail" auto="'true'">
                                                </custom-image>
                                            </pane-v>
                                        </tabs-v>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-5"></div>
                    </div>
                </nav>
            </aside>

            <!-- ----------------------------------------------------------- -->

            <div class="content-body py-3 pe-3">
                <section class="pt-4 pb-3">
                    <form class="row" ng-class="{'submitted': submitted}" ng-submit="save()">
                        <tabs-v class="mb-3">
                            <pane-v header="Content">
                                <module-content model="viewmodel" additional-data="additionalData">
                                </module-content>
                            </pane-v>
                            <pane-v icon="fas fa-cog" header="" class="ms-auto" ng-if="isAdmin">
                                <module-advanced model="viewmodel" additional-data="additionalData">
                                </module-advanced>
                            </pane-v>
                        </tabs-v>
                    </form>
                </section>
            </div>
        </div>
    </div>
</div>